<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>antd效果的步骤条</title>

    <style>
        .steps{
        }

        .circle{
            color: #fff;
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: cadetblue;
            line-height: 40px;
            text-align: center;
            
        }

        .line{
            width: 300px;
            background-color: cadetblue;
            height: 1px;
            display: inline-block;
            transform: translateY(-4px);

        }


    </style>
  </head>

  <body>

    <div class="steps">
        <div class="circle">1</div>
        <span>步骤1</span> 
        <div class="line"></div>
        <div class="circle">1</div>
        <span>步骤2</span> 
        <div class="line"></div>
        <div class="circle">1</div>
        <span>步骤3</span> 

    </div>


  </body>
</html>
